<template>
  <div>
    <div class="header">
      <img src="../assets/meituan.png" alt="" />
    </div>
    <div class="main-content">
      <div class="username">
        <span class="label">用户名</span>
        <input v-model="username" @focus="()=>isInputing[0]=true" @blur="confirmUs" />
        <div class="notice-msg" v-if="!isInputing[0]">
          <div class="wrong-msg" v-if="!usCorrect">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-buzhengque"></use>
            </svg>
            <span>用户名不符合要求</span>
          </div>
          <div class="correct-msg" v-else>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengque"></use>
            </svg>
          </div>
        </div>
      </div>
      <div class="set-pwd">
        <span class="label">{{$route.query.message=='register' ? '创建':'修改'}}密码</span>
        <input type="password" v-model="password" @focus="()=>isInputing[1]=true" @blur="confirmPwd" />
        <div class="notice-msg" v-if="!isInputing[1]">
          <div class="wrong-msg" v-if="!pwdCorrect">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-buzhengque"></use>
            </svg>
            <span>密码不符合要求</span>
          </div>
          <div class="correct-msg" v-else>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengque"></use>
            </svg>
          </div>
        </div>
      </div>
      <div class="confirm-pwd">
        <span class="label">确认{{$route.query.message=='register' ? '创建':'修改'}}</span>
        <input v-model="passwordAgain" @focus="()=>isInputing[2]=true" @input="confirmIsSame" />
        <div class="notice-msg" v-if="!isInputing[2]">
          <div class="wrong-msg" v-if="!isPwdSame">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-buzhengque"></use>
            </svg>
            <span>密码不一致</span>
          </div>
          <div class="correct-msg" v-else>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengque"></use>
            </svg>
          </div>
        </div>
      </div>
      <button type="" @click="query=='register'?handleRegister():handleReset()">完成注册</button>
    </div>
  </div>
</template>

<script>
import { request } from '../utils/request'
import '../style/iconfont'
import '../style//index.css'
export default {
  data() {
    return {
      username: '',
      password: '',
      passwordAgain: '',
      isInputing: [false, false, false],
      usCorrect: false,
      pwdCorrect: false,
      isPwdSame: false,
      query:this.$route.query.message
    }
  },
  methods: {
    confirmUs() {
      this.isInputing[0] = false
      let userNameReg = /^1[345789]\d{9}$/
      this.usCorrect = userNameReg.test(this.username)
      console.log('手机号正误', this.usCorrect)
    },
    confirmPwd() {
      this.isInputing[1] = false
      let passwordReg = /^.*(?=.{6,16})(?=.*\d)(?=.*[a-z]||[A-Z]).*$/
      this.pwdCorrect = passwordReg.test(this.password)
    },
    confirmIsSame() {
      this.isInputing[2] = false
      this.isPwdSame = this.password == this.passwordAgain ? true : false
    },
    // 发起注册请求的方法
    handleRegister() {
      if (this.usCorrect && this.pwdCorrect && this.isPwdSame) {
        this.request({
          method: 'POST',
          url: 'register',
          data: {
            username: this.username,
            password: this.password
          }
        }).then(res => {
          console.log(res.data)
          if (!res.data.created) alert('该账号已经被注册！')
          else {
            alert('注册成功')
            // 注册成功后跳转页面，通过查询字符串传递数据
            this.$router.push({path:'login',query:{username:this.username}})
            }
        })
      }else{
        alert('请正确填写信息！')
      }
    },
    // 修改密码
    handleReset(){
      if (this.usCorrect && this.pwdCorrect && this.isPwdSame) {
        this.request({
          method: 'POST',
          url: 'reset',
          data: {
            username: this.username,
            password: this.password
          }
        }).then(res => {
          console.log(res.data)
          if (res.data.resetRes) {
            alert('修改成功！去登陆吧！')
            this.$router.push({path:'login',query:{username:this.username}})
            }
          else {
            alert('该用户名不存在！')
            }
        })
      }else{
        alert('请正确填写信息！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  width: 980px;
  height: 47px;
  margin: 40px auto;
  text-align: left;
  img {
    width: 130px;
  }
}
.main-content {
  width: 980px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  & > div {
    display: flex;
    align-items: center;
    margin: 10px 0;
    .label {
      width: 100px;
      height: 40px;
      line-height: 40px;
    }
    input {
      width: 280px;
      height: 28px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
    }
    .notice-msg {
      margin-left: 10px;
      span {
        margin-left: 5px;
        color: #666;
        font-size: 12px;
      }
    }
  }
  button {
    width: 285px;
    height: 40px;
    margin: 20px 0 0 100px;
    background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%);
    border-width: 0;
    box-shadow: 0 2px 1px rgb(191 105 0 / 15%);
    background-size: 100%;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>
